import React from 'react'

class TodoContent extends React.Component{
    
    render(){
        const {datalist,removeItem,completeItem} = this.props;
        return (
            <div>
                <table className="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">待办事项</th>
                            <th scope="col">添加时间</th>
                            <th scope="col">是否完成</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {/* 列表渲染：map */}
                        {datalist.map((item, idx) => {
                            return (
                                <tr key={item.id} className={item.done ? 'table-success' : ''}>
                                    <th scope="row">{idx + 1}</th>
                                    <td>{item.todo}</td>
                                    <td>{item.date}</td>
                                    <td>{item.done ? '是' : '否'}</td>
                                    <td>
                                        <i className="bi bi-check-square me-3" onClick={completeItem.bind(null, item.id)}></i>
                                        <i className="bi bi-x-square" onClick={removeItem.bind(null,item.id)}></i>

                                    </td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
            </div>
        )
    }
}

export default TodoContent;